<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }
            input[type=number]{width:60px;}



        </style>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div id="app">

        <div class="card">

            <div class="card-header">
                <h3 class="card-title"> 工时记录 <small>今日：<code>{{summary.todayTime}}分</code> 本月：<code>{{(summary.currMonth/60).toFixed(2)}}时</code> 未估时<code>{{summary.estimatedNotReady}}</code>条 </small> </h3>
            </div>
            <div class="card-body">
                <div>
                    任务：<input v-model="work.subject">
                    耗时：<input v-model="work.duration">分钟。
                    <button @click="update(work)">提交</button>
                </div>
                <div>
                    状态：<select v-model="selector.target.status">
                    <option value="">全部</option>
                    <option v-for="o in dictList('issue.status')" :value="o.code">{{o.code}} {{o.value}}</option>
                </select>

                    关键词：<input placeholder="名称" v-model="selector.keyword">
                    <button onclick="loadData()">Search</button>

                    每页<input type="number" step="1" v-model.lazy="selector.pageSize">条。
                    第<input type="number" step="1" min="1" :max="Math.ceil(total/selector.pageSize)"
                             v-model="selector.pageNo">页。
                    共<code>{{total}}</code>条，<code>{{Math.ceil(total/selector.pageSize)}}</code>页。
                </div>
                <table class="table table-hover table-bordered">
                    <tr>
                        <td>#</td>
                        <td>日期</td>
                        <td>标题</td>
                        <td>工时（分钟）</td>
                        <td>完成</td>
                        <td> -</td>
                    </tr>
                    <template v-for="(work,index) in list">
                        <tr @dblclick="issue.editing = !issue.editing">
                            <td>{{index+1}}</td>
                            <td>{{new Date(work.businessDate).toLocaleDateString()}}</td>
                            <td>{{work.subject}}<a v-if="work.taskId" :href="`/pm/task/view?taskId=${work.taskId}`">View</a></td>
                            <td><input v-model="work.duration" /></td>
                            <td>{{work.completed?'完成':''}}</td>

                            <td>
                                <button @click="update(work)">保存</button>

                                <button v-if="work.completed==0" @click="work.completed=1">完工</button>
                                <button v-else @click="work.completed=0">未完</button>
                            </td>
                        </tr>

                    </template>
                </table>

            </div>

            <div style="position:fixed;right:10px;bottom:10px;">
                <a class="btn btn-default" @click="newWorkLog()">新增工作记录</a>
                <a class="btn btn-default" @click="loadSummary()">刷新统计</a>
            </div>

        </div>
    </div>

</div>

<th:block th:fragment="footer">

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/marked/9.0.0/marked.min.js"></script>-->
    <script src="/static/lib/editor.md/lib/marked.min.js"></script>
    <!--    <script src="/static/lib/editor.md/editormd.min.js"></script>-->
    <script>
        var rendererMD = new marked.Renderer();
            marked.setOptions({
              renderer: rendererMD,
              gfm: true,
              tables: true,
              breaks: false,
              pedantic: false,
              sanitize: false,
              smartLists: true,
              smartypants: false
            });


    </script>
    <script>


        const { createApp } = Vue;
            var app = createApp({
            data() {
              return {
                list:[], total:0,catalogList:[],
                currentIndex : -1,work:{},
                summary:{},
                selector:{target:{},mine:1,withTaskList:1,withPrettyActor:1,pageSize:20,pageNo:1,urgent:null,status:null}
              }
            },methods:{
                update:function (issue){
                    var url = "/pm/work/log/update";
                    axios.post(url, issue).then(function (response) {
                        console.log("response",response)
                        loadData();
                    }).catch(function (error) {
                        console.log("error",error);
                        loadData();
                    });
                },newWorkLog:function(){
                    var issue = {subject:"任务名称"};
                    this.list.push(issue)
                    this.submit(issue)
                },loadData:function(){
                    var selector = this.selector || {}
                    axios.post('/pm/work/log/list', selector).then((response)=> {
                        console.log("response",response)
                        this.list = response.data.data||[];
                        this.total=response.data.total || 0;
                        this.catalogList=response.data.dict||[];
                    }).catch(function (error) {
                        console.log("error",error);
                    });
                },loadSummary:function(){
                    var selector = this.selector || {}
                    axios.post('/pm/work/log/summary', {mine:1}).then((response)=> {
                        console.log("response",response)
                        var ls = response.data.data || [];
                        this.summary = ls.length>0 ? ls[0]:{}
                    }).catch(function (error) {
                        console.log("error",error);
                    });
                } ,dictList:function(catalog){
                    for(var i=0;i<this.catalogList?.length;i++){
                        var ca = this.catalogList[i];
                        if(ca.code == catalog){
                            return ca.dictList || [];
                        }
                    }
                    return [];
                }
             },
            watch:{
                selector:{
                    handler:function(nv,ov){
                        loadData()
                    },deep:true
                }
            }
          }).mount('#app');


        function loadData( ){
            app.loadData();
            app.loadSummary();
        }

        window.onload=function(){
           loadData( );
        }



    </script>
</th:block>
</body>
</html>